﻿<!DOCTYPE html>
<html>
<head>
    <title>Fireworks</title>
    <style>
        body {
            background-color: black;
            overflow: hidden;
        }
        #fireworks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="fireworks"></div>

    <script>
        // 创建烟花
        function createFirework() {
            var firework = document.createElement('div');
            firework.className = 'firework';
            firework.style.backgroundColor = getRandomColor();

            var xPos = Math.random() * window.innerWidth;
            var yPos = Math.random() * window.innerHeight;
            firework.style.left = xPos + 'px';
            firework.style.top = yPos + 'px';

            document.getElementById('fireworks').appendChild(firework);

            // 动画效果：烟花升空后爆炸消失
            setTimeout(function() {
                firework.style.opacity = 0;
                explodeFirework(firework);
            }, 1000);
        }

        // 爆炸效果
        function explodeFirework(firework) {
            var particles = 50; // 爆炸粒子数量

            for (var i = 0; i < particles; i++) {
                var particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.backgroundColor = firework.style.backgroundColor;

                var xPos = firework.offsetLeft;
                var yPos = firework.offsetTop;
                particle.style.left = xPos + 'px';
                particle.style.top = yPos + 'px';

                var angle = Math.random() * Math.PI * 2;
                var speed = Math.random() * 5 + 2;
                var xVel = Math.cos(angle) * speed;
                var yVel = Math.sin(angle) * speed;

                animateParticle(particle, xPos, yPos, xVel, yVel);

                document.getElementById('fireworks').appendChild(particle);
            }

            firework.remove();
        }

        // 粒子动画效果
        function animateParticle(particle, xPos, yPos, xVel, yVel) {
            var animation = setInterval(function() {
                xPos += xVel;
                yPos += yVel;

                particle.style.left = xPos + 'px';
                particle.style.top = yPos + 'px';

                xVel *= 0.99;
                yVel *= 0.99;
                yVel += 0.25;

                if (yPos >= window.innerHeight) {
                    clearInterval(animation);
                    particle.remove();
                }
            }, 10);
        }

        // 获取随机颜色
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 定时创建烟花
        setInterval(createFirework, 1000);
    </script>
</body>
</html>
